<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width" /><!-- Do not change this! -->
		
		<!-- Stylesheets -->
		<!-- jQuery and jQuery Mobile -->
		<link rel="stylesheet" type="text/css" href="./themes/AndroidHolo.min.css" /><!-- ThemeRoller theme -->
		<link rel="stylesheet" type="text/css" href="./themes/jquery.mobile.icons-1.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="./themes/jquery.mobile.structure-1.4.2.min.css" />
		
		<!-- jpHolo theme -->
		<link rel="stylesheet" type="text/css" href="./themes/jpholo.css" />
		<link rel="stylesheet" type="text/css" href="./themes/jpholo.splitview.css" />
		<link rel="stylesheet" type="text/css" href="./themes/jpholo.tablet.css" id="sizeStylesheet" />
		
		<!-- JavaScript -->
		<!-- Cordova PhoneGap --><!-- exclude the scripts below if you are not deploying with PhoneGap -->
		<script type="text/javascript" src="./cordova.js"></script>
		<script type="text/javascript" src="./backgroundService-3.1.0.js"></script>
		<script type="text/javascript" src="./cordova_custom_plugins.js"></script>
		
		<!-- jQuery -->
		<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
		
		<!-- jQuery Mobile -->
		<script type="text/javascript" src="./js/jquery.mobile.settings.js"></script><!-- this must be loaded before jQuery Mobile -->
		<script type="text/javascript" src="./js/jquery.mobile-1.4.2.min.js"></script>
		
		<!-- Other frameworks -->
		<script type="text/javascript" src="./js/fastclick.js"></script><!-- for speeding op tap events, load this AFTER jQuery Mobile -->
		<script type="text/javascript" src="./js/i18next-1.7.2.min.js"></script><!-- for multi language -->
		
		<!-- Application -->
		<!-- Set document, used in jpholo.core.js -->
		<script type="text/javascript">
			window.indexFile = "index_tablet.html";
			window.phonegapExcluded = false; // set this value to either true or false, depending on if you load the Cordova PhoneGap scripts.
		</script>
		<!-- jpHolo core -->
		<script type="text/javascript" src="./js/jpholo.core.js"></script>
		<script type="text/javascript" src="./js/jpholo.core.services.js"></script>
		<!-- your scripts -->
		
		<title>jpHolo</title>
	</head>
	<body>
		<div id="indexPage" data-role="page" data-theme="a"><!-- id to tie the page event to this specific page -->
			
			<!-- left panel  -->
			<div id="panelMenuIndex" data-role="panel" data-theme="b" data-position="left" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuIndexUL" data-role="listview"></ul>
			</div><!-- here you see why in the javascript there is a page event: initPageVarsOnShow('Index'); and: initPageVarsOnCreate('Index'); -->
			<!-- /panel -->
			
			<!-- right panel  -->
			<div id="panelMenuRightIndex" data-role="panel" data-theme="b" data-position="right" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuRightIndexUL" data-role="listview"></ul>
			</div><!-- here you see why in the javascript there is a page event: initPageVarsOnShow('Index'); and: initPageVarsOnCreate('Index'); -->
			<!-- /panel -->
			
			<div class="headerSticky ui-title" data-role="header" data-hide-during-focus="" data-tap-toggle="false" data-position="fixed" data-theme="a">
				<div>
					<p class="headerBarText"><img id="headerTitleIndex" class="headerIconTitle" src="./images/icons/ic_launcher_full_menu.png" /><img id="headerShareIndex" class="headerIconSecondRight" src="./images/icons/ic_action_share_header.png" /><img id="headerOverflowIndex" class="headerIconFirstRight" src="./images/icons/ic_action_overflow_header.png" />
					&nbsp;</p>
				</div><!-- populate the panel menu, also with the id Index in this case -->
			</div><!-- /header -->
			
			<div role="main" class="ui-content" data-theme="a">
				
				<div class="content-secondary">
				
					<h1>Index</h1>
					<p>Holo Light theme with Dark action bar.</p>				
					<a id="clearFirstBoot" data-role="button">Clear to first boot</a>
					
				</div><!-- /contentsecundary -->
			
				<div class="content-primary">
					
					<h1>About</h1>
					<p>Get jpHolo on GitHub <a href="https://github.com/teusinkorg/jpHolo" target="_blank">here</a></p>
					<p>Frameworks and plugins that are used to make this application template</p>
					<p>- Platform: <a href="http://phonegap.com/" target="_blank">PhoneGap</a><br />
					- Platform: <a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a><br />
					- Web: <a href="http://www.androidicons.com/" target="_blank">Android Icons</a><br />
					- jQuery Mobile plugin: <a href="https://github.com/teusinkorg/energize.js" target="_blank">Energize.js</a><br />
					- PhoneGap plugin: <a href="https://github.com/Red-Folder/Cordova-Plugin-BackgroundService" target="_blank">Background Service</a><br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/04/phonegap-android-share-plugin.html" target="_blank">Share</a><br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/04/phonegap-android-toast-plugin.html" target="_blank">Toast</a><br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/08/phonegap-android-appstore-plugin.html" target="_blank">Appstore</a><br />
					- PhoneGap plugin: PackageVersion<br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/09/phonegap-android-androidpreferences.html" target="_blank">AndroidPreferences</a>
					</p>
					
					<h1>Suggestions</h1>
					<p>- jQuery Mobile plugin: <a href="http://jqmiconpack.andymatthews.net/#/" target="_blank">JQM Icons</a><br />
					- PhoneGap plugin: <a href="https://github.com/phonegap-build/PushPlugin" target="_blank">Google Cloud Messaging</a><br />
					- PhoneGap plugin: <a href="https://github.com/phonegap-build/GAPlugin" target="_blank">Google Analytics</a><br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/07/phonegap-android-cachecleaner-plugin.html" target="_blank">CacheCleaner</a><br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/04/phonegap-android-downloader-plugin.html" target="_blank">Downloader</a>
					</p>
				
				</div><!-- /contentprimary -->
				
			</div><!-- /content -->
			
			<div data-role="footer" data-hide-during-focus="" data-tap-toggle="false" data-position="fixed" data-theme="b" class="actionbarTransparant">
				<div>
					<img id="footerShareIndex" src="./images/icons/ic_action_share_header.png" class="footerIconLeft">
					<img id="footerToastIndex" src="./images/icons/ic_action_list_header.png" class="footerIconRight">
				</div>
			</div><!-- /footer -->
		
		</div><!-- /page -->
		
		<div id="otherPage" data-role="page" data-theme="a">
			
			<!-- left panel  -->
			<div id="panelMenuOther" data-role="panel" data-theme="b" data-position="left" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuOtherUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<!-- right panel  -->
			<div id="panelMenuRightOther" data-role="panel" data-theme="b" data-position="right" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuRightOtherUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<div class="headerSticky ui-title" data-role="header" data-hide-during-focus="" data-tap-toggle="false" data-position="fixed" data-theme="a">
				<div>
					<p class="headerBarText"><img id="headerTitleOther" class="headerIconTitle" src="./images/icons/ic_launcher_full_arrow.png" /><img id="headerShareOther" class="headerIconSecondRight" src="./images/icons/ic_action_share_header.png" /><img id="headerOverflowOther" class="headerIconFirstRight" src="./images/icons/ic_action_overflow_header.png" />
					&nbsp;</p>
				</div>
			</div><!-- /header -->
			
			<div role="main" class="ui-content" data-theme="a">
				
				<div class="content-secondary">
				
					<h1>Other Page</h1>
					<p id="systemSpecs"></p>
					
				</div><!-- /contentsecundary -->
			
				<div class="content-primary">
					
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sollicitudin nibh id neque vulputate, eu convallis ligula faucibus. Maecenas tincidunt, magna id convallis accumsan, est magna pulvinar magna, quis commodo augue tellus imperdiet mauris. Proin fermentum ante eget molestie porta. Sed tempor adipiscing interdum. Cras sed sollicitudin justo. Etiam rutrum tristique lacus. In venenatis augue nibh. Aliquam erat volutpat. Cras rhoncus nulla urna, dignissim hendrerit neque sagittis iaculis. Pellentesque euismod mauris lacus, vitae ullamcorper lectus porta volutpat. Pellentesque euismod consequat gravida. Cras ac risus tristique, varius nunc auctor, pellentesque nisi. Vestibulum arcu mi, rhoncus non ultricies vel, iaculis eget nisl. Vivamus faucibus dignissim justo, a euismod mauris commodo vitae. Sed ac mollis tortor. Cras egestas nunc eget magna tincidunt, vel tempor leo iaculis.</p>
					
					<p>Nunc interdum dui sit amet nisl consectetur, eget viverra nibh malesuada. Maecenas at nisi a risus faucibus tristique. Nam rhoncus, orci rhoncus scelerisque bibendum, diam enim laoreet sem, vehicula porttitor diam eros ac nisi. Ut in arcu ac risus tincidunt faucibus. Vivamus mattis erat non semper scelerisque. Nunc sagittis euismod posuere. Fusce dictum elementum libero quis tristique. Ut mollis augue et iaculis vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc at magna porta, iaculis urna sed, mollis nunc. Phasellus erat lorem, auctor sit amet pellentesque a, aliquam at dolor. Donec congue, nisl quis feugiat convallis, erat odio laoreet enim, non rutrum dolor risus tempor nunc. Duis et sem lacinia ipsum aliquam ullamcorper. Proin aliquet vehicula magna, et semper purus dapibus eu.</p>
					
					<p>Integer non imperdiet velit. Curabitur semper sapien erat, id rhoncus eros ornare at. Ut a dapibus lacus. Maecenas semper leo eros, eu iaculis ipsum fermentum tempus. Vivamus mollis sed orci in consequat. Aenean vel tellus nisl. Etiam ligula purus, tincidunt ac vulputate pharetra, pharetra ac diam. Vestibulum viverra pharetra sollicitudin. Sed id dolor quis lacus bibendum pellentesque. Curabitur orci neque, elementum interdum tristique consequat, accumsan eu velit. Donec pulvinar dignissim ante, quis elementum mi elementum quis. Nam placerat magna tempor, sagittis arcu nec, molestie nisi.</p>
					
					<p>Vivamus suscipit purus vel feugiat molestie. Vestibulum sit amet pharetra elit. Integer porta tincidunt eros, non dignissim libero blandit nec. In cursus erat non dolor facilisis, ut ornare ipsum ornare. Aliquam lacinia rhoncus quam, vitae imperdiet elit posuere at. Phasellus odio urna, interdum sit amet varius a, vehicula ac elit. Sed vulputate, erat vel interdum interdum, nibh purus rhoncus ipsum, ut pellentesque lorem nisl sed libero. Nulla adipiscing sodales metus, ut congue enim commodo ut. Quisque ut porta sem. Nullam eget mi malesuada, lobortis mi a, tincidunt lorem. Sed sit amet gravida lectus, vitae faucibus enim. Cras consequat mollis felis vitae congue. Nulla facilisi.</p>
					
					<p>Quisque viverra at tortor eget fringilla. Aenean est mi, cursus non dolor ac, pulvinar aliquet sem. Aenean sed nibh quam. Aenean viverra ut dolor in luctus. Ut porta nisl nibh, vitae sagittis orci ultrices et. Etiam vestibulum nisi vitae nisi consectetur eleifend. In egestas justo nec nunc fermentum, vitae bibendum ante semper. Fusce non bibendum nunc.</p>
				
				</div><!-- /contentprimary -->
				
			</div><!-- /content -->
		
		</div><!-- /page -->
		
		<div id="servicePage" data-role="page" data-theme="a">
			
			<!-- left panel  -->
			<div id="panelMenuService" data-role="panel" data-theme="b" data-position="left" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuServiceUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<!-- right panel  -->
			<div id="panelMenuRightService" data-role="panel" data-theme="b" data-position="right" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuRightServiceUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<div class="headerSticky ui-title" data-role="header" data-hide-during-focus="" data-tap-toggle="false" data-position="fixed" data-theme="a">
				<div>
					<p class="headerBarText"><img id="headerTitleService" class="headerIconTitle" src="./images/icons/ic_launcher_full_menu.png" /><img id="headerShareService" class="headerIconSecondRight" src="./images/icons/ic_action_share_header.png" /><img id="headerOverflowService" class="headerIconFirstRight" src="./images/icons/ic_action_overflow_header.png" />
					&nbsp;</p>
				</div>
			</div><!-- /header -->
			
			<div role="main" class="ui-content" data-theme="a">
		
				<table>
				
				<tr class="tdTitle">
					<td colspan=2>Service settings</td>
				</tr>
				
				<tr class="lineBreak">
					<td class="center" colspan=2><p class="thinSettings">Android Service. A service that can execute native Java code in the background in a PhoneGap app on the Android platform.</p></td>
				</tr>
				
				<tr class="lineBreak">
					<td class="left"><p class="bigSettings">Service enabled</p><p class="tinySettings">Enable or disable the service.</p></td>
					<td class="right">
						<select name="flipServiceStatus" id="serviceStatus" data-role="flipswitch" data-corners="false" data-mini="true" data-theme="c">
							<option value="off">off</option>
							<option value="on">on</option>
						</select>
					</td>
				</tr>
				
				<tr class="lineBreak">
					<td class="left"><p class="bigSettings">Set toast duration</p><p class="tinySettings">Show a toast for a shorter or longer period.</p></td>
					<td class="right">
						<select name="flipServiceToastDuration" id="serviceToastDuration" data-role="flipswitch" data-corners="false" data-mini="true" data-theme="c">
							<option value="short">short</option>
							<option value="long">long</option>
						</select>
					</td>
				</tr>
				
				<tr class="lineBreak">
					<td class="left"><p class="bigSettings">Interval timer enabled</p><p class="tinySettings">Execute the service on a given time interval.</p></td>
					<td class="right">
						<select name="flipServiceTimer" id="serviceTimer" data-role="flipswitch" data-corners="false" data-mini="true" data-theme="c">
							<option value="off">off</option>
							<option value="on">on</option>
						</select>
					</td>
				</tr>
				
				<tr class="nonLineBreak">
					<td colspan=2><p class="bigSettings">Set interval to once every...</p><div id="timerDurationStatus" class="darkcyan"></div></td>
				</tr>
				
				<tr class="lineBreak">
					<td colspan=2>
						<div data-role="controlgroup">
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer1" data-mini="true" value="1 min" />
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer2" data-mini="true" value="30 min" />
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer3" data-mini="true" value="1 hour" />
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer4" data-mini="true" value="6 hours" />
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer5" data-mini="true" value="12 hours" />
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer6" data-mini="true" value="1 day" />
						</div>
					</td>
				</tr>
				
				<tr class="nonLineBreak">
					<td colspan=2><p class="bigSettings">Run once</p><p class="tinySettings">Execute the service now and only once.</p></td>
					
				</tr>
				
				<tr class="lineBreak">
					<td colspan=2>
						<div data-role="controlgroup" class="settingButtons">
							<button id="serviceRunOnce" data-mini="true">NOW</button>
						</div>
					</td>
				</tr>
				
				<tr class="lineBreak">
					<td class="left"><p class="bigSettings">Start service at boot</p><p class="tinySettings">Restart the service when the device is restarted.</p></td>
					<td class="right">
						<select name="flipServiceBootStatus" id="serviceBootStatus" data-role="flipswitch" data-corners="false" data-mini="true" data-theme="c">
							<option value="off">off</option>
							<option value="on">on</option>
						</select>
					</td>
				</tr>
				
				</table>
			
			</div><!-- /content -->
		
		</div><!-- /page -->
		
	</body>
</html>